<template>
    <div class="topo-variable">
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item v-if="queryParams.type === 3" prop="serialNumber">
                <el-select v-model="queryParams.serialNumber" :placeholder="$t('scada.topo.components.topo-variable.764509-1')" size="small">
                    <el-option v-for="(item, index) in deviceBindList" :key="index" :label="item.deviceName" :value="item.serialNumber"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="queryParams.type === 2" prop="sceneModelDeviceId">
                <el-select v-model="queryParams.sceneModelDeviceId" :placeholder="$t('scada.topo.components.topo-variable.764509-3')" size="small" clearable>
                    <el-option v-for="(item, index) in sceneDeviceList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="modelName">
                <el-input v-model="queryParams.modelName" :placeholder="$t('scada.topo.components.topo-variable.764509-5')" size="small" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('scada.topo.components.topo-variable.764509-9') }}</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('scada.topo.components.topo-variable.764509-10') }}</el-button>
            </el-form-item>
        </el-form>

        <el-table v-if="!multiple" class="single-table" ref="singleTable" v-loading="loading" :data="variableList" @select="selectRow" size="small" :border="false">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-6')" align="left" prop="deviceName" min-width="150" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-0')" align="left" prop="serialNumber" min-width="140" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-7')" align="left" prop="productName" min-width="150" />
            <el-table-column v-if="queryParams.type === 2" :label="$t('scada.topo.components.topo-variable.764509-2')" align="left" prop="sceneModelDeviceName" min-width="120" />
            <el-table-column :label="$t('scada.topo.components.topo-variable.764509-4')" align="left" prop="modelName" min-width="120" />
            <el-table-column :label="$t('scada.topo.components.topo-variable.764509-8')" align="left" prop="identifier" min-width="120" />
        </el-table>
        <el-table v-else ref="multipleTable" v-loading="loading" :data="variableList" @selection-change="handleSelectionChange" size="small" :row-key="(row) => row.identifier" :border="false">
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-6')" align="left" prop="deviceName" min-width="150" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-0')" align="left" prop="serialNumber" min-width="140" />
            <el-table-column v-if="queryParams.type === 3" :label="$t('scada.topo.components.topo-variable.764509-7')" align="left" prop="productName" min-width="150" />
            <el-table-column v-if="queryParams.type === 2" :label="$t('scada.topo.components.topo-variable.764509-2')" align="left" prop="sceneModelDeviceName" min-width="120" />
            <el-table-column :label="$t('scada.topo.components.topo-variable.764509-4')" align="left" prop="modelName" min-width="120" />
            <el-table-column :label="$t('scada.topo.components.topo-variable.764509-8')" align="left" prop="identifier" min-width="120" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size" @pagination="getVariableList" />
    </div>
</template>

<script>
import { getSceneModelDetail } from '@/api/scene/list.js';
import { listDeviceBind, getListVariable } from '@/api/scada/topo.js';

export default {
    name: 'TopoVariable',
    props: {
        multiple: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            loading: true, // 遮罩层
            deviceBindList: [], // 被绑定设备列表
            sceneDeviceList: [],
            // 查询参数
            queryParams: {
                scadaGuid: '',
                type: null,
                serialNumber: '',
                sceneModelDeviceId: null,
                modelName: '',
                page: 1,
                size: 10,
            },
            variableList: [], // 设备属性数据
            total: 0, // 总条数
            sinSelectData: {}, // 单选数据
            mulSelectData: [], // 多选数据
        };
    },
    async mounted() {
        const { guid, type } = this.$route.query; // 赋值type
        const scadaType = type ? Number(type) : 3;
        this.queryParams = { ...this.queryParams, scadaGuid: guid, type: scadaType };
        // 获取服务
        if (scadaType === 2) {
            await this.getSceneModelDevices(); // 场景设备列表
        }
        if (scadaType === 3) {
            await this.getBindDeviceList();
        }
        this.getVariableList();
    },
    methods: {
        // 获取绑定设备列表
        getBindDeviceList() {
            return new Promise((resolve) => {
                const { guid } = this.$route.query;
                const params = {
                    scadaGuid: guid,
                    pageNum: 1,
                    pageSize: 9999,
                };
                listDeviceBind(params).then((res) => {
                    if (res.code == 200) {
                        this.deviceBindList = res.rows;
                        this.queryParams.serialNumber = this.deviceBindList.length !== 0 ? this.deviceBindList[0].serialNumber : '';
                        resolve();
                    }
                });
            });
        },
        // 查询场景设备列表
        getSceneModelDevices() {
            return new Promise((resolve) => {
                const id = this.$route.query.sceneModelId;
                getSceneModelDetail(id).then((res) => {
                    if (res.code === 200) {
                        this.sceneDeviceList = res.data.sceneModelDeviceVOList;
                        resolve();
                    }
                });
            });
        },
        // 查询设备属性列表数据
        getVariableList() {
            this.loading = true;
            getListVariable(this.queryParams).then((res) => {
                if (res.code == 200) {
                    this.variableList = res.rows;
                    this.total = res.total;
                }
                this.loading = false;
            });
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.page = 1;
            if (this.multiple && this.queryParams.type !== 2) {
                this.$refs['multipleTable'].clearSelection();
            }
            this.getVariableList();
        },
        // 重置按钮操作
        resetQuery() {
            if (this.queryParams.type === 3 && this.deviceBindList.length === 0) {
                this.getBindDeviceList();
            }
            this.resetForm('queryForm');
            this.queryParams.serialNumber = this.deviceBindList.length !== 0 ? this.deviceBindList[0].serialNumber : '';
            if (this.multiple) {
                this.$refs['multipleTable'].clearSelection();
            }
            this.handleQuery();
        },
        // 单选
        selectRow(val, row) {
            this.$refs.singleTable.clearSelection();
            this.$refs.singleTable.toggleRowSelection(row, true);
            this.sinSelectData = row;
        },
        // 单选回调
        selectRowDataClick() {
            return this.sinSelectData;
        },
        // 多选回调
        selectRowsDataClick() {
            return this.mulSelectData;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.mulSelectData = selection;
        },
        // 取消选择 (外部调用)
        clearSelection() {
            const type = this.multiple ? 'multipleTable' : 'singleTable';
            this.$refs[type].clearSelection();
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-variable {
    width: 100%;

    .single-table {
        ::v-deep .el-table__header-wrapper .el-checkbox {
            display: none;
        }
    }
}
</style>
